<template>
  <div class="prop">
    <div class="prop">
      <div style="height:100px;width:100%"></div>
      <div class="warpprop" style="width:900px;height:550px;">
        <div class="propheader">
          新建广告主
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" style="top:-5px;" @click="setnewadd">关闭</el-button>
        </div>
        <div class="seachlist">
          <div class="seachlistitem">
            <div class="nameone">公司名称</div>
            <el-input style="width:200px;" @input="change($event)" v-model="addparam.name"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">省/市</div>
            <v-distpicker
              :province="addparam.province"
              @input="change($event)"
              :city="addparam.city"
              hide-area
              @selected="selectcity"
            ></v-distpicker>
          </div>
          <div class="seachlistitem">
            <div class="nameone">行业</div>
            <el-select v-model="addparam.industry_id" @input="change($event)" placeholder="请选择">
              <el-option v-for="item in hy_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <!-- <el-cascader
    v-model="addparam.industry_id"
    :options="hy_list"
    :props="props"
            @change="handleChange"></el-cascader>-->
          </div>

          <div class="seachlistitem">
            <div class="nameone">联系电话</div>
            <el-input
              v-model="addparam.mobile"
              maxlength="11"
              @input="change($event)"
              pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
              type="tel"
              style="width:200px;"
            ></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">税号</div>
            <el-input style="width:200px;" @input="change($event)" v-model="addparam.number"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">开户银行</div>
            <el-input style="width:200px;" @input="change($event)" v-model="addparam.bank"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">类型</div>
            <el-select v-model="addparam.class_id" @input="change($event)" placeholder="请选择">
              <el-option v-for="item in lx_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>

          <div class="seachlistitem">
            <div class="nameone">银行账号</div>
            <el-input style="width:200px;" @input="change($event)" v-model="addparam.bank_num"></el-input>
          </div>
          <div class="seachlistitem">
            <!-- <el-button type="primary" >保存</el-button> -->
            <el-button type="primary" style="margin-left:20px;" @click.native="setaddstatus">添加联系人</el-button>
          </div>
        </div>
        <div class="p-list list-p">
          <el-table
            :data="linkmanList"
            border
            style="width: 100%"
            :row-style="{height:'10px'}"
            :cell-style="{padding:'5px 0'}"
            v-if="linkmanList.length>0"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center" width="100"></el-table-column>
            <el-table-column prop="name" align="center" label="性别" width="130">
              <template slot-scope="scope">{{scope.row.sex==1?'男':'女'}}</template>
            </el-table-column>
            <el-table-column prop="position" align="center" label="职务"></el-table-column>
            <el-table-column prop="mobile" align="center" label="电话" width="150"></el-table-column>
            <el-table-column prop="birthday" align="center" label="出生日期" width="200"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button @click="dellist(scope)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="close">
          <el-button type="primary" @click.native="save">保存</el-button>
        </div>
      </div>
    </div>
    <div class="prop addpeo" v-if="addstatus">
      <div style="height:250px;width:100%"></div>
      <div class="warpprop" style="width:700px;height:300px;">
        <div class="propheader">
          添加联系人
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setaddstatus">关闭</el-button>
        </div>
        <div class="seachlist">
          <div class="seachlistitem">
            <div class="nameone">姓名</div>
            <el-input style="width:200px;" v-model="linkmanparam.name"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">职务</div>
            <el-input style="width:200px;" v-model="linkmanparam.position"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">电话</div>
            <el-input
              style="width:200px;"
              maxlength="11"
              pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
              type="tel"
              v-model="linkmanparam.mobile"
            ></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">性别</div>
            <el-radio v-model="linkmanparam.sex" label="1">男</el-radio>
            <el-radio v-model="linkmanparam.sex" label="2">女</el-radio>
          </div>

          <div class="seachlistitem">
            <div class="nameone">出生日期</div>
            <el-date-picker
              v-model="linkmanparam.birthday"
              type="date"
              style="width:200px;"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
          <div class="seachlistitem">
            <!-- <el-button type="primary" >保存</el-button> -->
            <!-- <el-button type="primary" style="margin-left:20px;">添加联系人</el-button> -->
          </div>
        </div>
        <div class="saveadd">
          <el-button type="primary" @click="linkmansave">保存联系人</el-button>
        </div>
        <!-- <div class="closesee">  <el-button type="primary">关闭</el-button>
        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
import VDistpicker from "v-distpicker";
import {
  getAdvertising,
  getDropdown,
  AddAdvertising,
  getAdvertisingInfo,
  SetAdvertisings
} from "@/api/Market.js";
import { SETDATE } from "@/api/System.js";
export default {
  props: ['sale_id'],
  data() {
    return {
      addparam: {
        name: "",
        province: "",
        city: "",
        industry_id: "",
        mobile: "",
        class_id: "",
        number: "",
        bank: "",
        bank_num: ""
      },
      linkmanList: [],
      linkmanparam: {
        name: "",
        sex: "1",
        position: "",
        mobile: "",
        birthday: ""
      },
      //广告主id
      ID: "",
      hy_list: [],
      lx_list: [],
      addstatus: false,
      type:1
    };
  },
  methods: {
    setnewadd() {
      if (this.addstatus) {
        this.linkmanparam.name = "";
        this.linkmanparam.sex = "1";
        this.linkmanparam.position = "";
        this.linkmanparam.mobile = "";
        this.linkmanparam.birthday = "";
      }
      this.$emit('closeAdd')
    },
    change(e) {
      this.$forceUpdate();
    },
    dellist(e) {
      // console.log(e)
      var index = e.$index;
      this.linkmanList.splice(index, 1);
    },
    //、、广告主编辑与添加 type为添加 2为编辑
    save() {
      if (!this.addparam.name) {
        this.$message({
          message: "公司名称不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.industry_id) {
        this.$message({
          message: "请选择行业",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.mobile) {
        this.$message({
          message: "请输入联系电话",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.number) {
        this.$message({
          message: "请输入开户银行",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.bank) {
        this.$message({
          message: "请输入开户银行",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.class_id) {
        this.$message({
          message: "请选择类型",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.bank_num) {
        this.$message({
          message: "请输入银行账号",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.city) {
        this.$message({
          message: "请选择省市",
          type: "warning"
        });
        return;
      }
      if (this.linkmanList.length < 1) {
        this.$message({
          message: "请添加联系人",
          type: "warning"
        });
        return;
      }
      
      let linkObj = [...this.linkmanList]
      linkObj.forEach(element => {
        element.birthday = new Date(element.birthday).getTime() / 1000;
      });
      this.addparam.MediaUpContact = this.linkObj;
      this.addparam.sale_id = this.sale_id
      // var length=this.addparam.industry_id.length-1
      // this.addparam.industry_id=this.addparam.industry_id[length]
      if (this.type == 1) {
        AddAdvertising(this.addparam).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.setnewadd();
            this.linkmanList = [];
            this.name = "";
            this.gg_page = 1;
            this.getlist();
          }
        });
      }
    },
    linkmansave() {
      if (!this.linkmanparam.name) {
        this.$message({
          message: "姓名不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.linkmanparam.position) {
        this.$message({
          message: "职务不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.linkmanparam.mobile) {
        this.$message({
          message: "联系方式不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.linkmanparam.birthday) {
        this.$message({
          message: "出生日期不能为空",
          type: "warning"
        });
        return;
      }

      this.linkmanparam.birthday =
        Date.parse(this.linkmanparam.birthday) / 1000;
      this.linkmanparam.birthday = SETDATE(this.linkmanparam.birthday, true);

      var obj = {
        name: this.linkmanparam.name,
        sex: this.linkmanparam.sex,
        position: this.linkmanparam.position,
        mobile: this.linkmanparam.mobile,
        birthday: this.linkmanparam.birthday
      };
      this.linkmanList.push(obj);
      this.setaddstatus();
    },
    getparam_hy() {
      let data = {
        type: 1
      };
      getDropdown(data).then(res => {
        if (res.code == 200) {
          this.hy_list = res.data;
        }
      });
    },
    getparam_lx() {
      let data = {
        type: 2
      };
      getDropdown(data).then(res => {
        if (res.code == 200) {
          this.lx_list = res.data[0].children;
        }
      });
    },
    selectcity(e) {
      this.addparam.province = e.province.value;
      this.addparam.city = e.city.value;
    },
    setaddstatus() {
      if (this.addstatus) {
        this.linkmanparam.name = "";
        this.linkmanparam.sex = "1";
        this.linkmanparam.position = "";
        this.linkmanparam.mobile = "";
        this.linkmanparam.birthday = "";
      }
      this.addstatus = !this.addstatus;
    }
  },
  computed: {},
  mounted() {
    this.getparam_hy();
    this.getparam_lx();
  }
};
</script>
<style lang="scss" scoped>
.addContanier {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.seachlist {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .listitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 100px;
    }
  }
}
.g-list {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
}
.block {
  float: right;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .seachlist {
    width: 95%;
    margin: 0 auto;
    display: flex;
    .seachlistitem {
      width: 50%;
      margin-top: 10px;
      display: flex;
      align-items: center;
      .nameone {
        width: 90px;
        font-size: 14px;
      }
    }
  }
}
.p-list {
  width: 95%;
  height: 300px;
  // background: red;
  margin: 0 auto;
  margin-top: 20px;
}
.list-p {
  max-height: 175px;
  // background: red;
  overflow: auto;
}
.addpeo {
  z-index: 999;
}
.saveadd {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
}
.close {
  width: 50px;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>